<template>
  <div class="tousu">
    <div class="title">投诉举报</div>
    <div class="con">
      <div id="tousu">加载中</div>
      <div class="list">
        <div class="item">
          <div>
            公共卫生
            <br />
            <span>{{itemJson.gonggong}}</span>
          </div>
          <div>
            <i class="iconfont icon-weishengsvg"></i>
          </div>
        </div>

        <div class="item">
          <div>
            计划生育
            <br />
            <span>{{itemJson.jihua}}</span>
          </div>
          <div>
            <i class="iconfont icon-jihuashengyu"></i>
          </div>
        </div>

        <div class="item">
          <div>
            血液安全
            <br />
            <span>{{itemJson.xueye}}</span>
          </div>
          <div>
            <i class="iconfont icon-xieyeanquanfuzhi"></i>
          </div>
        </div>

        <div class="item">
          <div>
            餐饮具
            <br />
            <span>{{itemJson.canyinju}}</span>
          </div>
          <div>
            <i class="iconfont icon-canju"></i>
          </div>
        </div>

        <div class="item">
          <div>
            消毒产品
            <br />
            <span>{{itemJson.xiaodu}}</span>
          </div>
          <div>
            <i class="iconfont icon-xiaoduchanpin"></i>
          </div>
        </div>

        <div class="item">
          <div>
            传染病
            <br />
            <span>{{itemJson.chuanran}}</span>
          </div>
          <div>
            <i class="iconfont icon-chuanranbing"></i>
          </div>
        </div>

        <div class="item">
          <div>
            医疗卫生
            <br />
            <span>{{itemJson.yiliao}}</span>
          </div>
          <div>
            <i class="iconfont icon-shitu_medical"></i>
          </div>
        </div>

        <div class="item">
          <div>
            学校卫生
            <br />
            <span>{{itemJson.xuexiao}}</span>
          </div>
          <div>
            <i class="iconfont icon-xuexiaoweisheng"></i>
          </div>
        </div>
        <div class="item">
          <div>
            放射卫生
            <br />
            <span>{{itemJson.fangshe}}</span>
          </div>
          <div>
            <i class="iconfont icon-fangsheweisheng"></i>
          </div>
        </div>
        <div class="item">
          <div>
            职业卫生
            <br />
            <span>{{itemJson.zhiye}}</span>
          </div>
          <div>
            <i class="iconfont icon-zhiyeweishengfuzhi"></i>
          </div>
        </div>
        <div class="item">
          <div>
            饮水卫生
            <br />
            <span>{{itemJson.yinshui}}</span>
          </div>
          <div>
            <i class="iconfont icon-shuilongtou-"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "../../plugs/bus";
import { getTouSuData, getTouSuData2 } from "../../api/gengduo";
export default {
  name: "TouSu",
  data() {
    return {
      ztItemJson: {
        zong: 3,
        denji: 1,
        daichazheng: 1,
        yichazheng: 1
      },
      itemJson: {
        gonggong: 1,
        yinshui: 1,
        zhiye: 1,
        fangshe: 1,
        xuexiao: 1,
        yiliao: 1,
        xiaodu: 1,
        chuanran: 1,
        canyinju: 1,
        xueye: 1,
        jihua: 1
      }
    };
  },
  methods: {
    async getData() {
      // try {
      var json = (await getTouSuData()).data.data;
      var json2 = (await getTouSuData2()).data.data;
      // } catch (error) {
      // var json2 = {
      //   total: 1,
      //   registeredTotal: 0,
      //   verigiedTotal: 1,
      //   waitVerifiedTotal: 0
      // };
      // var json = [
      //   {
      //     total: 0,
      //     code: "01",
      //     name: "公共场所"
      //   },
      //   {
      //     total: 0,
      //     code: "02",
      //     name: "生活饮用水"
      //   },
      //   {
      //     total: 0,
      //     code: "03",
      //     name: "职业卫生"
      //   },
      //   {
      //     total: 0,
      //     code: "04",
      //     name: "放射诊疗"
      //   },
      //   {
      //     total: 0,
      //     code: "05",
      //     name: "学校卫生"
      //   },
      //   {
      //     total: 1,
      //     code: "06",
      //     name: "医疗卫生"
      //   },
      //   {
      //     total: 0,
      //     code: "0701",
      //     name: "消毒产品单位"
      //   },
      //   {
      //     total: 0,
      //     code: "0703",
      //     name: "传染病防治"
      //   },
      //   {
      //     total: 0,
      //     code: "0704",
      //     name: "餐饮具集中消毒单位"
      //   },
      //   {
      //     total: 0,
      //     code: "08",
      //     name: "血液安全"
      //   },
      //   {
      //     total: 0,
      //     code: "09",
      //     name: "计划生育"
      //   }
      // ];
      // }

      this.ztItemJson = {
        zong: json2.total,
        denji: json2.registeredTotal,
        daichazheng: json2.verigiedTotal,
        yichazheng: json2.waitVerifiedTotal
      };

      setTimeout(() => {
        this.tousu = this.drawPie("tousu");
      });

      let item = {};
      json.forEach(val => {
        switch (val.name) {
          case "公共场所":
            item.gonggong = val.total;
            break;
          case "生活饮用水":
            item.yinshui = val.total;
            break;
          case "职业卫生":
            item.zhiye = val.total;
            break;
          case "放射诊疗":
            item.fangshe = val.total;
            break;
          case "学校卫生":
            item.xuexiao = val.total;
            break;
          case "医疗卫生":
            item.yiliao = val.total;
            break;
          case "消毒产品单位":
            item.xiaodu = val.total;
            break;
          case "传染病防治":
            item.chuanran = val.total;
            break;
          case "餐饮具集中消毒单位":
            item.canyinju = val.total;
            break;
          case "血液安全":
            item.xueye = val.total;
            break;
          case "计划生育":
            item.jihua = val.total;
            break;
          default:
            break;
        }
      });
      this.itemJson = item;
    },
    init() {
      // this.tousu = this.drawPie("tousu");
    },
    drawPie(id) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id));
      let option = {
        title: {
          text: this.ztItemJson.zong,
          x: "center",
          y: "center",
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
            fontSize: 36
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        series: [
          {
            name: " ",
            type: "pie",
            radius: ["46%", "86%"],
            center: ["50%", "50%"],

            color: ["#d473f8", "#af2de5", "#6b19dd", "#6559d7"], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: [
              {
                value: this.ztItemJson.denji,
                name: "已登记"
              },
              {
                value: this.ztItemJson.daichazheng,
                name: "待查证"
              },
              {
                value: this.ztItemJson.yichazheng,
                name: "已查证"
              }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            minAngle: 130,
            // roseType: "area",
            startAngle: 220,
            label: {
              normal: {
                formatter: ["{b|{b}}", "{c|{c}}"].join("\n"),
                rich: {
                  c: {
                    color: "#fff",
                    fontSize: 20,
                    lineHeight: 30
                  },
                  b: {
                    color: "#fff",
                    fontSize: 12
                  }
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(98,137,169,0)"
                },
                length: 6
                // length2: 10,
              }
            },
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, 0.8)",
                shadowBlur: 50
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      // myChart.resize();
      return myChart;
    }
  },
  mounted() {
    // this.init();
  },
  created() {
    Bus.$on("changeSize", e => {
      this.tousu.resize();
    });
    this.getData();
  }
};
</script>

<style scoped lang="less">
.tousu {
  margin-left: 1rem;
  grid-row: 1 / span 5;

  & > .title {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
    background: linear-gradient(to right, #253664, #04163e, #253664);
  }

  .con {
    height: 100% - 6.6rem;

    #tousu {
      height: 40%;
      padding: 2rem 0;

      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(120deg, #155799, #159957);
      background-size: 200% 100%;
     background-clip: text;
      color: transparent;
      animation: bgp 3s infinite linear;
    }

    .list {
      height: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      .item {
        display: flex;
        color: #fff;
        align-items: center;
        justify-content: space-around;
        padding: 0 10%;

        & > div:first-of-type {
          span {
            font-size: 1.6rem;
          }
        }

        & > div:last-of-type {
          width: 3rem;
          height: 3rem;
          background: linear-gradient(to right, #3668ad, #3cb7b5);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          .iconfont {
            font-size: 1.8rem;
          }
        }
      }
    }
  }
}
</style>